﻿
@model Dictionary<string, object> 
@using HomeCareLibrary.Core.JsonObjects
   

  <a  href="javascript:void(0);" style="cursor:pointer;"  onclick="FlipClick('ACR')";>Click Me</a> 
                                

                     @Html.Hidden("hdnChangeDT",@Model["hasDwellingTypeChanged"])

                                     

 
                                                     <h3 class="personalization-heading no-Txtshadow">Home Features</h3>
                                                    <p class="home-pages-txt">
                                                        When you open each of the six section below,
you can put a checkmark for each feature that
applies to your particular home.
                                                    </p>
                                                    <p class="top-data">
                                                        Your choices will be included in the calculation
of your personalized home care program.
                                                    </p>


                                                   <div class="feature-tab">
                                                        <div class="hcl-tab">
                                                            <div class="panel-group" id="accordion">

                                                               
                                                             @foreach (var getList in (List<FeatureCategory>)Model["featureCategories"])
                                                             {
                                                                <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed click" data-parent="#accordion" data-toggle="collapse"  href="#@getList.category.Substring(0, 4)" > @getList.category </a> </h4>
                                          </div>

                                                                     <div style="height: 0px;overflow:scroll" id="@getList.category.Substring(0, 4)" class="panel-collapse collapse animationClass">
                                                                           <div  class="heading clearfix" >
                                                                               <a class="clickClose"  href="javascript:void(0)" data-name="@getList.category.Substring(0, 4)" >
                                                                               <span class="headerText">  </span>

                                    <span class="closeBTN" > 
                                        <img data-name="@getList.category.Substring(0, 4)"  class="clickClose" alt="" src="@Url.Content("~/images/personalization-images/close-animation.png")"> 

                                    </span></a>

                                                                           </div>
                                                                              <div class="panel-body nopadding data-inner">
                                                                                <div id="accordion-inn-Heating" class="panel-group innerItemCategory">

                                                                                @foreach (var getInnerList in (List<HomeCareLibrary.Core.JsonObjects.Feature>)@getList.features)
                                                                                {  
                                                                                      <div class="panel panel-default">
                                                                                            <div class="panel-heading">
                                                                                                <h4 class="panel-title checkbox checkboxFive"> 
                                                                                                    <label class="homeOuter markedCheckedBox">
                                                                                                        @*<input  type="checkbox"  id="@getInnerList.featureCode"   data-featurecode="'@getInnerList.featureCode'" class="markedChecked" checked="@getInnerList.isSelected">*@                                                                                                        
                                                                                                        <a href="#" style="float: left; margin-left: -21px; margin-top: -15px; margin-right: -15px; padding-left: 0px; position: relative; z-index: 5; height: 10px;">
                                                                                                            @if (@getInnerList.isSelected == true)
                                                                                                            {                                                                                                               
                                                                                                                <img alt="" id="@getInnerList.featureCode" src="@Url.Content("~/Images/personalization-images/check-mark.png")" style="height: 10px; width: 10px;" class="tik">
                                                                                                            }
                                                                                                            else
                                                                                                            {                                                                                                                
                                                                                                                <img alt="" id="@getInnerList.featureCode" src="" style="height: 10px; width: 10px;" class="close">
                                                                                                            }
                                                                                                        </a>
                                                                                                        <label for="@getInnerList.featureCode" class="homeInner"></label>
                                                                                                        @getInnerList.featureName
                                                                                                    </label>

                                                                                                     <a style="cursor:pointer;" href="javascript:void(0);" data-name="@getInnerList.featureCode" data-parent="#accordion-inn-Heating"  data-toggle="collapse" class="accordion-toggle collapsed btn-left"></a>  @* onclick="FlipClick('@getInnerList.featureCode')"*@
           

                                                                                                </h4>
                                                                                            </div>
                                                                                            <div class="panel-collapse collapse" id="@(getList.category.Substring(0, 4) + getInnerList.featureCode)" style="height: auto;">
                                                                                              
                                                                                            </div>
                                                                                        </div>
                                                                                }

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                        </div>
                                                             }
                                                          
                                              </div>
                                                        </div>
                                                    </div>
             

                                      @*  <h3 class="personalization-heading">Home Features</h3>
                                  <p class="home-pages-txt">When you open each of the six section below,
                                    you can put a checkmark for each feature that
                                    applies to your particular home.</p>
                                  <p class="top-data"> Your choices will be included in the calculation
                                    of your personalized home care program.</p>
                                  <div class="feature-tab">
                                    <div class="hcl-tab">
                                      <div class="panel-group" id="accordion">
                                        <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed click" data-toggle="collapse" data-parent="#accordion" href="#heating-and-cooling"> Heating & Cooling </a> </h4>
                                          </div>
                                        </div>
                                        <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#Appliances"> Appliances </a> </h4>
                                          </div>
                                        </div>
                                        <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#Structural"> Structural </a> </h4>
                                          </div>
                                        </div>
                                        <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#Outside"> Outside </a> </h4>
                                          </div>
                                        </div>
                                        <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#Furnishings"> Furnishings </a> </h4>
                                          </div>
                                        </div>
                                        <div class="panel panel-default">
                                          <div class="panel-heading">
                                            <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#Safety"> Safety &amp; Other </a> </h4>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div style="height: 0px;overflow:scroll" id="heating-and-cooling" class="panel-collapse collapse">
                                    <div id="Div1" class="heading clearfix" >
                                    <a class="clickClose" href="javascript:void(0)">
                                    <span> Heating & Cooling </span>
                                    <!--<span class="IconClose" href="javascript:void(0)"> <img  alt="" src="images/hcltab-arrow-open.png"> </span>-->
                                     <span class="closeBTN"><img   alt="" src="images/personalization-images/close-animation.png"></span> </a>
                                    </div>
                                    <div class="panel-body nopadding data-inner">
                                      <div id="accordion-inn-Heating" class="panel-group">
                                        <ul class="list-unstyled HomeFeature-list">
                                          <li>
                                            <input id="checkboxInput" type="checkbox" style="">
                                            <label for="checkboxInput">Central Air Conditioning</label>
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed">  <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Room Air Conditioner <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Baseboard Heating <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Electronic Air Cleaner <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Evaporative (Swamp) Cooler <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            </h4>
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Fresh Air Heat Exchanger <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Fireplace (wood-burning) <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Gas Furnace or Boiler <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Electronic Air Cleaner <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Evaporative (Swamp) Cooler <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            </h4>
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Fresh Air Heat Exchanger <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Fireplace (wood-burning) <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Gas Furnace or Boiler <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Electronic Air Cleaner <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Evaporative (Swamp) Cooler <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            </h4>
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Fresh Air Heat Exchanger <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Fireplace (wood-burning) <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                           
                                          </li>
                                          <li>
                                            <input type="checkbox" style="">
                                            <a id="btn-left" href="#hbac1" data-parent="#accordion-inn-Heating" data-toggle="collapse" class="accordion-toggle collapsed"> Gas Furnace or Boiler <span class="flip-IBTN"><img src="images/personalization-images/i-icon.png" /></span></a>
                                            
                                          </li>
                                        </ul>
                                      </div>
                                    </div>
                                  </div>*@









<script type="text/javascript">
   
    $(function () {


        $(".click").live("click", function () {

            var getheaderText = $(this).text();
            $(".headerText").html(getheaderText);
            var gettheCurrentHref = $(this).attr('href');

            $(gettheCurrentHref).css("display", "block");
            doit(gettheCurrentHref);

            //Disable the help icon Image Over the Top
            $(".ques-bt").attr('disabled', true);
            $(".ques-bt").css({ cursor: "default" });
           })


        $(".btn-left").live("click", function (e) {
            FlipClick($(this).attr('data-name'));
            e.preventDefault();
        });

        $(".clickClose").live("click", function () {

            var getname = $(this).attr('data-name');
            $('#' + getname).animate({
                left: 0, height: 0
            }, 1000, function () {
            });


            //Enable the help icon Image Over the Top
            $(".ques-bt").attr('disabled', false);
            $(".ques-bt").css({ cursor: "pointer" });
        })

        
    });


    function doit(gettheCurrentHref) {
        var $window = $(window);
        var windowsize = $window.width();

        if (windowsize < 767) {
            $(gettheCurrentHref).animate({ left: 0, height: 435 }, 1000);
        }
        else {
            $(gettheCurrentHref).animate({ left: 0, height: 470 }, 1000);
        }

        window.scrollTo(0, 0);
    }

    function FlipClick(ID) {

        $.ajax({
            type: "GET",
            url: "/Personalization/featureDetail",
            data: { 'id': ID },
            success: function (data) {              
                $(".flipboxnew").html(data);
                $(".flipboxnew").fadeIn('slow', 'swing');
                //$(".flipboxnew").flippy({

                //    direction: "left",
                //    duration: "500",
                //    verso: data,
                //    onFinish: function () {
                //        window.scrollTo(0, 0);
                //    },
                //    onReverseFinish: function () {
                //        $(".flipbox").show();
                //    }
                //});

                $(".flipbox").hide();
                //e.preventDefault();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Failed to retrieve data.');

            }
        });
    }

    $(function () {
        checkedCheckonbasedoffeatureString();
    });
</script>

@*<script type="text/javascript">
     $(function () {
         $(".click").live("click",function () {
            $("#heating-and-cooling").css("display", "block");
            doit();
        })
         $(".clickClose").live("click",function () {
             $("#heating-and-cooling").animate({ left: 0, height: 0 }, 1200);
             
        })
     });

    function doit() {

        $("#heating-and-cooling").animate({ left: 0, height: 444 }, 1200);
    }


    $(function () {

        $("#btn-reverse").live("click", function (e) {

            $(".flipbox").flippyReverse();
            e.preventDefault();
        });

        $("#btn-left").live("click", function (e) {
            var div = "<div class=\"rotation-page\"> " +

          "<div class=\"main-content\"> " +
             "<div class=\"personalization-content\"> " +
               "<div class=\"personalization-bg\"> " +
               "<div class=\"personalization-inn\"> " +
			"<div class=\"personalization-data rotation-per-data\">" +
			"<a id='btn-reverse' class=\"closeicon\"><img src=\"/images/personalization-images/close.png\" alt=\"\" /></a>" +
			"<div class=\"rotation-top clearfix\"><img class=\"img-responsive\" src=\"images/personalization-images/rotation-img.png\" alt=\"\"> " +
			"<span>Programmable Thermostats</span></div>" +
              "  <p class=\"top-data\">Lorem ipsum dolor sit amet, consectetur " +
"adipisicing elit, sed do eiusmod tempor " +
"incididunt ut labore et dolore magna aliqua. " +
"Ut enim ad minim veniam, quis nostrud " +
"exercitation ullamco laboris nisi ut aliquip ex " +
"ea commodo consequat.</p>" +


"</div></div></div></div></div>";

            $(".flipbox").flippy({

                direction: "left",
                duration: "550",
                verso: div,
            });
            e.preventDefault();
        });

        $("#btn-right").on("click", function (e) {
            $(".flipbox").flippy({
                color_target: "red",
                direction: "right",
                duration: "550",
                verso: "<div id=\"right-content\"><img src=\"http://placekitten.com/610/300\" alt=\"placeholder\"/></div>",
            });
            e.preventDefault();
        });

        $("#btn-top").on("click", function (e) {
            $(".flipbox").flippy({
                color_target: "#b6d635",
                direction: "top",
                duration: "550",
                verso: "<span class=\"big\">Great !</span>",
            });
            e.preventDefault();
        });

        $("#btn-bottom").on("click", function (e) {
            $(".flipbox").flippy({
                color_target: "#03588C",
                direction: "bottom",
                duration: "550",
                verso: "<span class=\"big\">Flip !</span>",
            });
            e.preventDefault();
        });


    });

</script>*@


                                              
                                       